<template>
  <div class="swiper">
    <router-link to="galary" append>
    <swiper :options="swiperOption">
      <swiper-slide
        v-for="item of swiperList"
        :key="item.id"
        >
        <div class="img-wrapper">
          <img
            class="swiper-img"
            :src="item.imgUrl">
        </div>
        <div class="desc-wrapper">
          <span class="left">{{item.date}}</span>
          <span class="middle">{{item.page}}张</span>
          <span class="right">编号：{{item.number}}</span>
        </div>
      </swiper-slide>
  </swiper>
</router-link>
  </div>
</template>

<script>
export default {
  name: 'detailSwiper',
  props:{
    swiperList:Array
  },
  data(){
    return {
     swiperOption:{
        loop:true,
        autoplay: 3000,
        speed: 1000,
        pagination: {
        el: '.swiper-pagination'
                  },
      },

    }
  }

}
</script>

<style lang="stylus" scoped>
.img-wrapper
  overflow:hidden
  height:0
  padding-bottom:41.5%
  background:#ccc
  .swiper-img
    max-width:100%
.desc-wrapper
  position:absolute
  top:2.82rem
  left:0
  background:rgba(0,0,0,.6)
  color:#fff
  width:100%
  display:flex
  .left
    float:left

    color:#fff
    font-size:.3rem
  .middle
    flex:1
    margin-left:3.6rem
    color:#fff
    font-size:.3rem
  .right:
    float:right
    margin-right:.1rem
    color:#fff
    font-size:.3rem
</style>
